<template>
    <div class="component-style">
        <!-- <div class="component-list" @dragstart="handleDragStart">
            <el-tooltip v-for="(item, index) in componentList" :key="index" class="item" effect="dark"
                :content="item.label" placement="right-start">
                <div class="list" draggable :data-index="index" :data-tooltip="item.label">
                    <span v-if="item.icon.substr(0, 2) === 'el'" :class="item.icon"></span>
                    <span v-else class="iconfont" :class="'icon-' + item.icon"></span>
                </div>
            </el-tooltip>
        </div> -->
        <!-- <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="边框组件" name="2">
            </el-collapse-item>
        </el-collapse>
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="特殊组件" name="3">
            </el-collapse-item>
        </el-collapse> -->


        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="信息" name="second">
                <div @dragstart.stop="handleDragStart">
                    <div class="component-class list" v-for="(item, index) in componentList" draggable="true" v-if="item.type == 'info'"
                        :key="index" :data-index="index">
                        <div class="component-header">
                            <div class="component-header-icon">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                                <div class="icon-3"></div>
                            </div>
                            <div class="component-header-text">{{ item.label }}</div>
                        </div>
                        <div class="component-buttom">
                            <img :src="item.image" class="zoom-image" style="width: 100%;border-radius: 5px;" draggable="true"
                                @dragstart.stop="handleDragStart($event, index)" />
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="小组件" name="third">
                <div @dragstart.stop="handleDragStart">
                    <div class="component-class list" v-for="(item, index) in componentList" draggable="true" v-if="item.type == 'xzj'"
                        :key="index" :data-index="index">
                        <div class="component-header">
                            <div class="component-header-icon">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                                <div class="icon-3"></div>
                            </div>
                            <div class="component-header-text">{{ item.label }}</div>
                        </div>
                        <div class="component-buttom">
                            <img :src="item.image" class="zoom-image" style="width: 100%;border-radius: 5px;" draggable="true"
                                @dragstart.stop="handleDragStart($event, index)" />
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图表" name="first">
                <div @dragstart.stop="handleDragStart">
                    <div class="component-class list" v-for="(item, index) in componentList" draggable="true" v-if="item.type == 'tb'"
                        :key="index" :data-index="index">
                        <div class="component-header">
                            <div class="component-header-icon">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                                <div class="icon-3"></div>
                            </div>
                            <div class="component-header-text">{{ item.label }}</div>
                        </div>
                        <div class="component-buttom">
                            <img :src="item.image" class="zoom-image" style="width: 100%;border-radius: 5px;" draggable="true"
                                @dragstart.stop="handleDragStart($event, index)" />
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="边框" name="fourth">
                <div @dragstart.stop="handleDragStart">
                    <div class="component-class list" v-for="(item, index) in componentList" draggable="true" v-if="item.type == 'bk'"
                        :key="index" :data-index="index">
                        <div class="component-header">
                            <div class="component-header-icon">
                                <div class="icon-1"></div>
                                <div class="icon-2"></div>
                                <div class="icon-3"></div>
                            </div>
                            <div class="component-header-text">{{ item.label }}</div>
                        </div>
                        <div class="component-buttom">
                            <img :src="item.image" class="zoom-image" style="width: 100%;border-radius: 5px;" draggable="true"
                                @dragstart.stop="handleDragStart($event, index)" />
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import componentList from '../custom-component/component-list'
import { infoList } from '../custom-component/component-list'
export default {
    data() {
        return {
            infoList,
            componentList,
            activeName: 'second'
        }
    },
    methods: {
        handleDragStart(e, index) {
            console.log('11', e)
            e.dataTransfer.setData('index', e.target.dataset.index ? e.target.dataset.index : index)
        },
        handleClick() { }
    },
}
</script>

<style lang="scss" scoped>
.component-style {
    width: 100%;
    height: 65%;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
}

.component-list {
    opacity: 1;
    height: 100%;
    // padding: 8px;
    display: grid;
    position: relative;
    grid-gap: 10px 19px;
    grid-template-columns: repeat(auto-fill, 75px);
    grid-template-rows: repeat(auto-fill, 40px);
    transition: opacity .5s .5s;
    margin-bottom: 10px;

    .list {
        // width: 80px;
        height: 35px;
        border: 1px solid #ddd;
        cursor: grab;
        text-align: center;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        &:active {
            cursor: grabbing;
        }

        .iconfont {
            margin-right: 4px;
            font-size: 20px;
        }

        .icon-wenben,
        .icon-biaoge {
            font-size: 18px;
        }

        .icon-tupian {
            font-size: 16px;
        }
    }
}

.component-class {
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #f2f3f5;
    // padding: 5px;

    .component-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        background-color: #e5e6eb;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;

        .component-header-icon {
            display: flex;

            .icon-1 {
                width: 8px;
                height: 8px;
                background-color: #fc625d;
                border-radius: 50%;
            }

            .icon-2 {
                width: 8px;
                height: 8px;
                background-color: #fcbc40;
                border-radius: 50%;
                margin-left: 3px;
            }

            .icon-3 {
                width: 8px;
                height: 8px;
                background-color: #34c749;
                border-radius: 50%;
                margin-left: 3px;
            }
        }

        .component-header-text {}
    }

    .component-buttom {
        padding: 10px;
    }
}
/* 定义图片的悬停放大效果 */
.zoom-image {
  transition: transform 0.5s ease; /* 动画过渡时间 */
}

.zoom-image:hover {
  transform: scale(1.05); /* 放大 1.2 倍 */
  cursor: pointer;
}
</style>
